<script>
	import {
		ref
	} from 'vue'
	export default {
		data() {
			return {
				hotpagelist: {
					hotpages1: [],
					hotpages2: [],
					hotpages3: [],
					hotpages4: [],
					hotpages5: []
				},
				tabtaboxshow: [true, false, false, false, false, false, false],
				dramalist: {
					dramapage1: [],
					dramapage2: [],
					dramapage3: [],
					dramapage4: [],
					dramapage5: [],
					dramapage6: [],
					dramapage7: []
				},

			};
		},
		// setup(){
		// 	let tabox=ref(null)
		// 	return {tabox}
		// },
		async mounted() {
			await this.$axios.get("/hotact")
				.then(res => {
					this.hotpagelist.hotpages1 = res.data.slice(0, 5)
					this.hotpagelist.hotpages2 = res.data.slice(5, 10)
					this.hotpagelist.hotpages3 = res.data.slice(0, 5)
					this.hotpagelist.hotpages4 = res.data.slice(5, 10)
					this.hotpagelist.hotpages5 = res.data.slice(0, 5)
					console.log(this.hotpagelist.hotpages1, "111111");
				})
			await this.$axios.get("/drama")
				.then(res => {
					this.dramalist.dramapage1 = res.data.slice(0, 6)
					this.dramalist.dramapage2 = res.data.slice(6, 12)
					this.dramalist.dramapage3 = res.data.slice(0, 6)
					this.dramalist.dramapage4 = res.data.slice(6, 12)
					this.dramalist.dramapage5 = res.data.slice(0, 6)
					this.dramalist.dramapage6 = res.data.slice(6, 12)
					this.dramalist.dramapage7 = res.data.slice(0, 6)
					console.log(this.dramalist.dramapage1, "aaaaa");
				})
		},
		methods: {
			showdrama(n) {
				// console.log(this.$ref.tabox
				for (var i = 0; i < 7; i++) {
					if (i == n) {
						// this.$set(this.tabtaboxshow, i, true)
						this.tabtaboxshow[i]=true
						document.querySelectorAll(".drama li")[i].className = "tabshow"

					} else {
						// this.$set(this.tabtaboxshow, i, false)
						this.tabtaboxshow[i]=false
						document.querySelectorAll(".drama li")[i].className = ""
					}
				}

			}
		}
	}
</script>

<template>
	<div class="wrapper">
		<div class="left">
			<!-- 热门活动 -->
			<div class="hotact">
				<!-- 轮播列表 -->
				<h3 class="demonstration">热门活动</h3>
				<el-carousel trigger="click" height="220px">
					<el-carousel-item v-for="item in hotpagelist" :key="item">
						<ul>
							<li class="hotli" v-for="(el,index) in item" :key="index">
								<a href="">
									<img :src="el.url" alt="">
									<h4 href="" class="small justify-center">{{el.title}}</h4>
								</a>
							</li>
						</ul>
					</el-carousel-item>
				</el-carousel>
			</div>

			<!-- 分类 -->
			<div class="detailkinds">
				<ul>
					<li class="">
						<a>音乐>></a>
						<a>小型现场</a>
						<a>音乐会</a>
						<a>演唱会</a>
						<a>音乐节</a>
					</li>
					<li class="">
						<a>戏剧>></a>
						<a>话剧</a>
						<a>音乐剧</a>
						<a>舞剧</a>
						<a>歌剧</a>
						<a>戏曲</a>
						<a>其他</a>
					</li>
					<li class="">
						<a>聚会>></a>
						<a>生活</a>
						<a>集市</a>
						<a>摄影</a>
						<a>外语</a>
						<a>桌游</a>
						<a>交友</a>
						<a>美食</a>
						<a>派对</a>
					</li>
					<li class="">
						<a>电影>></a>
						<a>主题放映</a>
						<a>影展</a>
						<a>影院活动</a>
					</li>
					<li class="">
						<a>其他>></a>
						<a>讲座</a>
						<a>展览</a>
						<a>运动</a>
						<a>旅行</a>
						<a>公益</a>
						<a>赛事</a>
						<a>课程</a>
						<a>亲子</a>
					</li>
				</ul>
			</div>

			<!-- 戏剧 -->
			<div class="drama">
				<div class="title">
					<h3 class="demonstration">戏剧</h3>
					<ul class="smallnav">
						<li @click="showdrama(0)" class="tab tabshow">最热</li>
						<li @click="showdrama(1)" class="tab">话剧</li>
						<li @click="showdrama(2)" class="tab">音乐剧</li>
						<li @click="showdrama(3)" class="tab">舞剧</li>
						<li @click="showdrama(4)" class="tab">歌剧</li>
						<li @click="showdrama(5)" class="tab">戏曲</li>
						<li @click="showdrama(6)" class="tab">其他</li>
					</ul>
					<a class="more" href="">更多>></a>
				</div>
			</div>
			<div class="dramabox">
				<ul v-for="(item,index) in dramalist" v-show="tabtaboxshow[index.substr(-1)-1]">
					<li class="tabox" v-for="(el,i) in item" :key="i">
						<img :src="el.url" alt="">
						<div class="info">
							<a href="">{{el.act}}</a>
							<div>
								<span class="time">{{el.actime}}</span>
								<span class="title">{{el.title}}</span>
								<span class="focus">{{el.focus}}人关注</span>
							</div>

						</div>
					</li>
				</ul>
			</div>

			<!-- 展览 -->
			<div class="exhibit"></div>

			<!-- 演唱会 -->
			<div class="live"></div>

			<!-- 音乐 -->
			<div class="music"></div>

			<!-- 亲子 -->
			<div class="family"></div>

			<!-- 电影 -->
			<div class="movies"></div>

			<!-- 聚会 -->
			<div class="party"></div>

			<!-- 讲座 -->
			<div class="lecture"></div>

			<!-- 其他 -->
			<div class="others"></div>
		</div>

		<div class="right">
			<a href="">+发起同城活动</a>

			<!-- 购票直通车 -->
			<div class="buytickets"></div>

			<!-- 主办方 -->
			<div class="easthome"></div>

			<!-- 了解更多 -->
			<div class="learnmore"></div>

			<!-- 联系我们 -->
			<div class="contactus"></div>
		</div>
	</div>

</template>

<style scoped lang="scss">
	.wrapper {
		width: 1040px;
		margin: 0 auto;
		font: 12px Helvetica, Arial, sans-serif;

		.left {
			width: 675px;
			padding-right: 25px;
			float: left;

			.hotact {
				width: 675px;
				margin-bottom: 40px;
			}

			.demonstration {
				color: var(--el-text-color-secondary);
				color: #333;
				width: 675px;
				height: 30px;
				font: 16px Arial, Helvetica, sans-serif;
				border-bottom: 1px dotted #dadada;
				margin-bottom: 20px;
			}

			.el-carousel__item:nth-child(2n) {
				/* background-color: #99a9bf; */
			}

			.el-carousel__item:nth-child(2n + 1) {
				/* background-color: #d3dce6; */
			}

			.hotact ul {
				width: 100%;
				display: flex;
				justify-content: space-between;

				li {
					width: 115px;
					height: 216px;

					/* background-color: brown; */
					img {
						width: 115px;
						height: 161px;
					}

					h4 {
						width: 115px;
						height: 40px;
						text-align: center;
						font: 14px Helvetica, Arial, sans-serif;
						color: #37a;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			/* 分类 */
			.detailkinds {
				margin-bottom: 40px;
				background: #f6f5f2;
				padding: 9px;
				width: 100%;

				ul {
					display: flex;
					width: 657px;
					height: 126px;

					li {
						width: 131px;
						padding: 7px;
						display: flex;
						flex-wrap: wrap;

						a {
							padding: 0 3px;
							border-radius: 1px;
							line-height: 1.5em;
							font-size: 13px;
							color: #37a;

							&:first-child {
								font-size: 14px;
								color: #111;
								margin-right: 50px;
							}
						}
					}
				}
			}

			.drama {
				.title {
					height: 25px;
					border-bottom: 1px dotted #ddd;
					margin-bottom: 20px;
					width: 675px;
					display: flex;

					.demonstration {
						width: 100px;
						border: none;
					}

					.smallnav {
						display: flex;
						width: 545px;
						margin-right: 50px;
						padding-bottom: 10px;
						margin-bottom: 20px;

						li {
							// width: 26px;
							line-height: 1.4;
							font-size: 13px;
							margin-right: 8px;
							height: 16px;
							margin-bottom: 5px;
							padding: 1px 10px;
							border-radius: 3px;
							color: #37a;

							&:hover {
								color: #fff;
								background: #6cc1d6;
							}
						}

						.tabshow {
							background: #e6e6e6;
							color: #333;

						}
					}

					a {
						width: 60px;
					}

					a:link {
						color: #37a;
						font-size: 13px
					}

					a:hover {
						background-color: #37a;
						color: #fff;
					}
				}
			}

			.dramabox {
				width: 675px;
				height: 423px;

				ul {
					width: 705px;
					height: 423px;
					display: flex;
					flex-wrap: wrap;

					.tabox {
						height: 101px;
						width: 45%;
						border: 0;
						padding: 0 0 40px 0;
						margin-left: 30px;
						display: flex;

						img {
							width: 75px;
							height: 96px;
							margin-right: 20px;
							overflow: hidden;
						}

						.info {
							color: #666;
							padding-right: 5px;
							width: 222.5px;
							height: 42px;


							a {
								font-size: 14px;
								height: auto;
								overflow: visible;
								margin-bottom: 6px;
								line-height: 1.5;
								color: #37a;
							}

							div {
								display: flex;
								flex-direction: column;
								height: 63px;
								justify-content: space-between;
								font-size: 13px;

								span {
									color: #666;
								}

								.time {}
							}
						}
					}
				}
			}
		}
	}



	.right {
		float: right;
		width: 300px;
		background-color: #dadada;
	}
</style>
